<template>
    <div class="shelf">
        <!-- 顶部栏 -->
        <div class="Nav">
            <div class="text">书架</div>
            <img src="../assets/images/sousuo.png" @click="goSearch" />
            <img src="../assets/images/lishi.png" />
            <img src="../assets/images/gengduo.png" />
        </div>
        <!-- 书籍 -->
        <div class="content" v-if="bookrackList !== null">
            <div
                class="item"
                v-for="(item, index) in bookrackList"
                :key="item.BookId"
                @click="goBookDetails(item.BookId, item.title)"
                @touchstart="gtouchstart(item)"
                @touchmove="gtouchmove()"
                @touchend="showDeleteButton(item)"
            >
                <img class="img-auto" :src="item.cover" />
                <div class="name">{{ item.title }}</div>
            </div>
        </div>
        <div class="tips" v-if="bookrackList == null || bookrackList.length == 0">
            <van-empty description="你的书架空空如也">
                <van-button round type="danger" class="bottom-button" @click="goBookStore">去选书</van-button>
            </van-empty>
        </div>
        <van-popup v-model="show" position="bottom" :style="{ height: 'auto' }">
            <div class="item" @click="goBookDetails(long.BookId, long.title)">
                <van-icon name="description" size="20px" />
                <div class="text">书籍详情</div>
            </div>
            <div class="item" @click="deleteItem">
                <van-icon name="delete-o" size="20px" />
                <div class="text">删除</div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { Dialog } from "vant";
export default {
    name: "Shelf",
    data() {
        return {
            bookrackList: null,
            // 底部弹出层
            show: false,
            // 长按目标
            long: null,
        };
    },
    created() {
        window.addEventListener("contextmenu", function (e) {
            e.preventDefault();
        });
        // 获取书架数据
        if (localStorage.getItem("bookrackList") !== null && localStorage.getItem("bookrackList").length > 0) {
            this.bookrackList = JSON.parse(localStorage.getItem("bookrackList"));
            //
        }
    },

    methods: {
        // 跳转书籍详情
        goBookDetails(BookId, title) {
            //
            //
            this.show = false;
            //
            if (BookId.split("_")[0] == "audio") {
                this.$router.push({
                    name: "ListenBook",
                    query: {
                        BookId,
                        title,
                    },
                });
            } else {
                this.$router.push({
                    name: "BookDetails",
                    query: {
                        BookId,
                        title,
                    },
                });
            }
        },

        goSearch() {
            this.$router.push({ name: "Search" });
        },

        //长按事件（起始）
        gtouchstart(item) {
            var self = this;
            this.timeOutEvent = setTimeout(function () {
                self.longPress(item);
            }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
            return false;
        },
        //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
        showDeleteButton(item) {
            clearTimeout(this.timeOutEvent); //清除定时器
            if (this.timeOutEvent != 0) {
                //这里写要执行的内容（如onclick事件）
            }
            return false;
        },
        //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
        gtouchmove() {
            clearTimeout(this.timeOutEvent); //清除定时器
            this.timeOutEvent = 0;
        },
        //真正长按后应该执行的内容
        longPress(item) {
            this.timeOutEvent = 0;
            //执行长按要执行的内容，如弹出菜单
            //
            //
            // 保存长按书籍
            this.long = item;
            this.show = true;
        },

        // 单本删除
        deleteItem() {
            //
            //
            this.show = false;
            Dialog.confirm({
                message: "是否删除选中的书籍?",
            })
                .then(() => {
                    for (let i = 0; i < this.bookrackList.length; i++) {
                        if (this.bookrackList[i].BookId == this.long.BookId) {
                            this.bookrackList.splice(i, 1);
                            // 更新本地缓存
                            localStorage.setItem("bookrackList", JSON.stringify(this.bookrackList));
                        }
                    }
                    // 没有书籍
                    if (this.bookrackList.length == 0) {
                        this.bookrackList = null;
                        // 删除缓存
                        localStorage.removeItem("bookrackList");
                    }
                })
                .catch(() => {
                    return;
                });
        },
        goBookStore() {
            this.$router.push({
                name: "Bookstore",
            });
        },
    },
};
</script>

<style lang="less" scoped>
.shelf {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    // width: 100%;
    // min-height: 667px;
    height: calc(100% - 50px);
    background-color: #f7f8f8;
    overflow-y: scroll;
    &::-webkit-scrollbar {
        display: none;
    }
    .bottom-button {
        width: 160px;
        height: 40px;
    }
    .van-popup--bottom {
        bottom: 49px;
        .item {
            height: 50px;
            display: flex;
            align-items: center;
            line-height: 25px;
            padding-left: 10px;
            border-bottom: 1px solid #e9cdcd;
            .text {
                color: rgb(84, 82, 82);
                font-size: 16px;
                margin-left: 15px;
            }
        }
    }
    .Nav {
        height: 50px;
        display: flex;
        align-items: center;
        .text {
            width: 50px;
            margin: 0 225px 0 10px;
            font-size: 16px;
            font-weight: 550;
        }
        img {
            width: 22px;
            height: 22px;
            margin-right: 10px;
        }
    }
    .content {
        // min-height: calc(100% - 50px);
        display: flex;
        flex-wrap: wrap;
        .item {
            width: 100px;
            height: 150px;
            margin: 0 15px 30px 10px;
            .name {
                margin: 10px 0 0 0;
                font-family: "宋体";
                // 给容器元素类型转换为
                display: -webkit-box;
                // 设置弹性盒子垂直排列
                -webkit-box-orient: vertical;
                // 控制要显示的行数
                -webkit-line-clamp: 2;
                // 溢出隐藏
                overflow: hidden;
            }
        }
    }
}
</style>
